import { createRouter, createWebHashHistory } from 'vue-router'
// import Layout from '@/views/Layout'
const Layout = () => import('@/views/Layout')
// import Home from '@/views/home/Home'
const Home = () => import('@/views/home/Home')
// import TopCategory from '@/views/category/index'
const TopCategory = () => import('@/views/category/index')
// import SubCategory from '@/views/category/sub'
const SubCategory = () => import('@/views/category/sub')
// import Login from '@/views/login'
const Login = () => import('@/views/login')
// import LoginCallback from '@/views/login/callback'
const LoginCallback = () => import('@/views/login/callback')

const Goods = () => import('@/views/goods/index')
const Cart = () => import('@/views/cart/index')
const Checkout = () => import('@/views/member/pay/checkout')
const Pay = () => import('@/views/member/pay/index')
const PayCallback = () => import('@/views/member/pay/pay-callback')
const MemberHome = () => import('@/views/member/home/index')
const MemberLayout = () => import('@/views/member/MemberLayout')
const MemberOrder = () => import('@/views/member/order/index')
const MemberOrderDetail = () => import('@/views/member/order/detail')

import store from '@/store'
import { h } from 'vue'

// 路由规则
const routes = [
  // 一级路由布局容器
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/',
        component: Home
      },
      {
        path: '/category/:id',
        component: TopCategory
      },
      {
        path: '/category/sub/:id',
        component: SubCategory
      },
      {
        path: '/product/:id',
        component: Goods
      },
      {
        path: '/cart',
        component: Cart
      },
      {
        path: '/member/checkout',
        component: Checkout
      },
      {
        path: '/member/pay',
        component: Pay
      },
      {
        path: '/pay/callback',
        component: PayCallback
      },
      {
        // 个人中心布局容器
        path: '/member',
        component: MemberLayout,
        children: [
          // 个人中心
          {
            path: '/member',
            component: MemberHome
          },
          // 为了使用vue3中 路由 exact-active-class 样式, 需要改变写法
          // 订单管理
          // {
          //   path: '/member/order',
          //   component: MemberOrder
          // },
          // // 订单详情
          // {
          //   path: '/member/order/:id',
          //   component: MemberOrderDetail
          // },
          {
            path: '/member/order',
            // vue3.0 需要有嵌套关系才能模糊匹配
            // 创建一个RouterView容器形成嵌套关系, jsx语法
            component: { render: () => h(<RouterView/>) },
            children: [
              {
                path: '',
                component: MemberOrder
              },
              // 订单详情
              {
                path: ':id',
                component: MemberOrderDetail
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/login/callback',
    component: LoginCallback
  }
]

// vue2.0 newVueRouter({})
// vue3.0 createRouter({})
const router = createRouter({
  // 使用hash的路由模式
  history: createWebHashHistory(),
  routes,
  // 每次切换路由的时候滚动到页面顶部
  scrollBehavior(to, from, savedPosition) {
    // vue2.0  x    y     控制
    // vue3.0  top  left  控制
    return {
      top: 0,
      left: 0
    }
  }
})

// 3.使用导航守卫, 遇见需要登录的路由跳转, 拦截到登录页面
router.beforeEach((to, from, next) => {
  // 校验token是否存在 且 需要登录的路由: 地址是以 /member 开头的
  const token = store.state.user.profile.token
  if (!token && to.path.startsWith('/member')) {
    // 跳转到登录页面, 并带上 redirectUrl
    return next(`/login?redirectUrl=${encodeURIComponent(to.fullPath)}`)
  }
  next()
})

export default router
